<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果要使用组件，直接将组件的名称以 HTML 标签的形式 引入到页面中即可。 -->
        <my-com1></my-com1>
    </div>
    
    <script>
        //1.1使用Vue.extend 来创建全局的Vue组件
        // var com1 = Vue.extend({
        //     template: '<h3>这是使用 Vue.extend 创建的组件</h3>'  //通过 template 属性， 指定了组件要展示的 HTML结构
        // })
        
        // //1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
        // //注意，自定义命名的 myCom1是以驼峰命名， 所以标签使用的时候要命名为 my-com1 才能渲染，如果不使用驼峰直接使用名称即可。
        // Vue.component('myCom1', com1)

        // 第二种方式，不用中间变量
        //第二个参数: Vue.extend 创建的组件，其中template 就是组件将来要展示的html内容
        Vue.component('myCom1', Vue.extend({
           template: '<h3>这是使用 Vue.extend 创建的组件</h3>'  //通过 template 属性， 指定了组件要展示的 HTML结构
        }))

          
        var vm = new Vue({
            el:"#app",
            data:{},
            methods: {}
        })
    </script>
</body>
</html>